<template>
  <div class="rumor-query-page">
    <!-- 页面头部 -->
    <section class="page-header">
      <div class="container">
        <h1 class="page-title">谣言检测</h1>
        <p class="page-subtitle">快速识别网络谣言，守护信息真实</p>
      </div>
    </section>

    <!-- 检测功能区域 -->
    <section class="detection-section">
      <div class="container">
        <div class="detection-content">
          <div class="detection-panel">
            <div class="panel-header">
              <h3 class="panel-title">智能图文检测</h3>
              <p class="panel-desc">支持文本、图片或图文混合检测，系统将自动选择最适合的检测方式</p>
            </div>
            
            <!-- 文本输入区域 -->
            <div class="input-section">
              <label class="input-label">
                <span class="label-text">📝 文本内容</span>
                <span class="label-optional">（可选）</span>
              </label>
              <textarea 
                v-model="textInput"
                placeholder="请输入需要检测的文本内容..."
                class="text-input"
                :class="{ 'error': textError }"
                @input="clearError"
              ></textarea>
            </div>

            <!-- 图片上传区域 -->
            <div class="upload-section">
              <label class="input-label">
                <span class="label-text">🖼️ 图片文件</span>
                <span class="label-optional">（可选）</span>
              </label>
              <div class="upload-area" @click="triggerFileInput" :class="{ 'has-file': selectedImage }">
                <input 
                  type="file" 
                  ref="fileInput" 
                  accept="image/*" 
                  @change="handleFileUpload"
                  style="display: none"
                >
                <div v-if="!selectedImage" class="upload-placeholder">
                  <div class="upload-icon">📷</div>
                  <p class="upload-text">点击上传图片</p>
                  <p class="upload-hint">支持 JPG、PNG、GIF 格式，最大 5MB</p>
                </div>
                <div v-else class="upload-preview">
                  <img :src="imagePreview" alt="Preview" class="preview-image">
                  <div class="preview-info">
                    <p class="file-name">{{ selectedImage.name }}</p>
                    <p class="file-size">{{ formatFileSize(selectedImage.size) }}</p>
                  </div>
                  <button @click.stop="removeImage" class="remove-btn">×</button>
                </div>
              </div>
            </div>

            <!-- 检测提示 -->
            <div class="detection-mode-hint">
              <div class="hint-item">
                <span class="hint-icon">📝</span>
                <span class="hint-text">仅输入文本：进行文本检测</span>
              </div>
              <div class="hint-item">
                <span class="hint-icon">🖼️</span>
                <span class="hint-text">仅上传图片：进行图片检测</span>
              </div>
              <div class="hint-item">
                <span class="hint-icon">🤖</span>
                <span class="hint-text">图文同时输入：进行多模态检测</span>
              </div>
            </div>

            <!-- 操作按钮 -->
            <div class="detection-actions">
              <button @click="clearAll" class="btn btn-secondary">清空内容</button>
              <button @click="startDetection" class="btn btn-primary" :disabled="isLoading || (!textInput.trim() && !selectedImage)">
                <span v-if="isLoading" class="loading-spinner"></span>
                {{ isLoading ? '检测中...' : '开始检测' }}
              </button>
            </div>
          </div>
        </div>

        <!-- 检测结果 -->
        <div v-if="detectionResult" class="result-section">
          <div class="result-card">
            <div class="result-header">
              <div class="result-title-section">
                <h3 class="result-title">检测结果</h3>
                <div class="detection-type-badge">
                  <span class="badge-icon">{{ getDetectionTypeIcon() }}</span>
                  <span class="badge-text">{{ getDetectionTypeText() }}</span>
                </div>
              </div>
              <div class="result-score" :class="result.riskLevel">
                <span class="score-label">可信度评分</span>
                <span class="score-value">{{ result.score }}%</span>
              </div>
            </div>
            <div class="result-content">
              <div class="risk-indicator">
                <div class="risk-level" :class="result.riskLevel">
                  <span class="risk-icon">{{ getRiskIcon(result.riskLevel) }}</span>
                  <span class="risk-text">{{ getRiskText(result.riskLevel) }}</span>
                </div>
                <div class="risk-description">{{ result.description }}</div>
              </div>
              <div class="detection-details">
                <h4>检测详情</h4>
                <ul class="details-list">
                  <li v-for="detail in result.details" :key="detail">{{ detail }}</li>
                </ul>
              </div>
              <div class="suggestions">
                <h4>建议</h4>
                <p>{{ result.suggestion }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 热门谣言展示 -->
    <section class="popular-rumors-section">
      <div class="container">
        <h2 class="section-title">近期热门谣言</h2>
        <div class="rumors-grid">
          <div class="rumor-card" v-for="rumor in popularRumors" :key="rumor.id">
            <div class="rumor-header">
              <span class="rumor-category">{{ rumor.category }}</span>
              <span class="rumor-date">{{ formatDate(rumor.date) }}</span>
            </div>
            <h3 class="rumor-title">{{ rumor.title }}</h3>
            <p class="rumor-content">{{ rumor.content }}</p>
            <div class="rumor-truth">
              <h4>真相</h4>
              <p>{{ rumor.truth }}</p>
            </div>
            <div class="rumor-footer">
              <span class="rumor-source">来源：{{ rumor.source }}</span>
              <button @click="shareRumor(rumor)" class="share-btn">分享</button>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 检测统计 -->
    <section class="statistics-section">
      <div class="container">
        <div class="stats-grid">
          <div class="stat-card" v-for="stat in statistics" :key="stat.id">
            <div class="stat-icon">{{ stat.icon }}</div>
            <div class="stat-value">{{ stat.value }}</div>
            <div class="stat-label">{{ stat.label }}</div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
export default {
  name: 'BasicRumorQuery',
  data() {
    return {
      textInput: '',
      selectedImage: null,
      imagePreview: '',
      isLoading: false,
      textError: false,
      detectionResult: null,
      
      // 热门谣言数据
      popularRumors: [
        {
          id: 1,
          category: '健康',
          title: '喝热水能杀死新冠病毒',
          content: '网传喝60度以上的热水能够杀死新冠病毒，预防感染...',
          truth: '新冠病毒主要通过呼吸道飞沫传播，仅仅喝热水并不能有效预防病毒感染。正确的预防方法包括戴口罩、勤洗手、保持社交距离等。',
          source: '世界卫生组织',
          date: new Date('2024-01-15')
        },
        {
          id: 2,
          category: '科技',
          title: '5G网络会导致脑癌',
          content: '有传言称5G网络的电磁辐射会导致脑癌和其他健康问题...',
          truth: '目前没有科学证据表明5G网络会导致癌症。5G使用的射频能量水平远低于可能造成健康危害的阈值。',
          source: '国际癌症研究机构',
          date: new Date('2024-01-10')
        },
        {
          id: 3,
          category: '食品',
          title: '某品牌牛奶含有三聚氰胺',
          content: '网上流传某知名品牌牛奶被检测出含有三聚氰胺...',
          truth: '经过官方检测，该品牌牛奶产品符合国家食品安全标准，不含三聚氰胺。相关传言为恶意造谣。',
          source: '国家食品药品监督管理总局',
          date: new Date('2024-01-05')
        }
      ],
      
      // 统计数据
      statistics: [
        { id: 1, icon: '🔍', value: '1,234,567', label: '累计检测次数' },
        { id: 2, icon: '✅', value: '98.5%', label: '检测准确率' },
        { id: 3, icon: '🚫', value: '456,789', label: '识别谣言数' },
        { id: 4, icon: '👥', value: '500万+', label: '服务用户数' }
      ]
    }
  },
  
  computed: {
    result() {
      return this.detectionResult
    }
  },
  
  methods: {
    clearError() {
      this.textError = false
    },
    
    clearAll() {
      this.textInput = ''
      this.selectedImage = null
      this.imagePreview = ''
      this.detectionResult = null
      this.textError = false
      if (this.$refs.fileInput) {
        this.$refs.fileInput.value = ''
      }
    },
    
    triggerFileInput() {
      this.$refs.fileInput.click()
    },
    
    handleFileUpload(event) {
      const file = event.target.files[0]
      if (file) {
        // 文件大小验证
        if (file.size > 5 * 1024 * 1024) {
          alert('文件大小不能超过5MB')
          return
        }
        
        // 文件类型验证
        if (!file.type.startsWith('image/')) {
          alert('请选择图片文件')
          return
        }
        
        this.selectedImage = file
        
        // 创建预览
        const reader = new FileReader()
        reader.onload = (e) => {
          this.imagePreview = e.target.result
        }
        reader.readAsDataURL(file)
        
        // 清除之前的检测结果
        this.detectionResult = null
      }
    },
    
    removeImage() {
      this.selectedImage = null
      this.imagePreview = ''
      this.detectionResult = null
      this.$refs.fileInput.value = ''
    },
    
    formatFileSize(bytes) {
      if (bytes === 0) return '0 Bytes'
      const k = 1024
      const sizes = ['Bytes', 'KB', 'MB', 'GB']
      const i = Math.floor(Math.log(bytes) / Math.log(k))
      return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
    },
    
    async startDetection() {
      // 验证输入
      const hasText = this.textInput.trim().length > 0
      const hasImage = this.selectedImage !== null
      
      if (!hasText && !hasImage) {
        alert('请输入文本内容或上传图片')
        return
      }
      
      this.isLoading = true
      
      try {
        // 确定检测类型
        let detectionType = 'text'
        let detectionContent = this.textInput
        
        if (hasText && hasImage) {
          detectionType = 'multimodal'
          detectionContent = {
            text: this.textInput,
            image: this.selectedImage
          }
        } else if (hasImage) {
          detectionType = 'image'
          detectionContent = this.selectedImage
        }
        
        // 模拟API调用
        const result = await this.mockDetectionAPI(detectionType, detectionContent)
        this.detectionResult = result
        
        // 滚动到结果区域
        this.$nextTick(() => {
          const resultElement = document.querySelector('.result-section')
          if (resultElement) {
            resultElement.scrollIntoView({ behavior: 'smooth' })
          }
        })
        
      } catch (error) {
        alert('检测失败，请重试')
      } finally {
        this.isLoading = false
      }
    },
    
    async mockDetectionAPI(type, content) {
      return new Promise((resolve) => {
        setTimeout(() => {
          // 模拟不同的检测结果
          // 在实际应用中，这里会使用 type 和 content 参数进行检测
          console.log('检测类型:', type, '检测内容:', content)
          
          // 根据检测类型生成不同的结果
          let baseResults = []
          
          if (type === 'multimodal') {
            baseResults = [
              {
                score: 92,
                riskLevel: 'low',
                description: '通过多模态分析，该内容的可信度很高。文本和图片内容相互印证，信息一致性良好。',
                details: [
                  '文本内容逻辑清晰，没有明显的虚假信息特征',
                  '图片内容与文本描述高度一致',
                  '多模态特征分析显示信息来源可靠',
                  '未发现明显的伪造或篡改痕迹'
                ],
                suggestion: '多模态检测结果显示该信息可信度较高，建议可以适当参考，但仍需通过权威渠道核实。'
              },
              {
                score: 35,
                riskLevel: 'high',
                description: '多模态分析发现文本和图片内容存在明显矛盾，可能包含虚假信息。',
                details: [
                  '文本描述与图片内容不符',
                  '图片可能被篡改或移花接木',
                  '多模态特征分析显示异常',
                  '信息来源和时间存在疑点'
                ],
                suggestion: '强烈建议不要传播此信息，文本和图片的不一致性表明可能存在恶意误导。'
              }
            ]
          } else {
            baseResults = [
            {
              score: 85,
              riskLevel: 'low',
              description: '该内容的可信度较高，但建议通过权威渠道进一步验证。',
              details: [
                '内容逻辑清晰，没有明显的虚假信息特征',
                '与已知权威信息源的内容基本一致',
                '语言表达正常，没有煽动性词汇'
              ],
              suggestion: '建议通过官方渠道或权威媒体进一步核实相关信息。'
            },
            {
              score: 45,
              riskLevel: 'medium',
              description: '该内容存在一定的风险，建议谨慎对待。',
              details: [
                '内容中包含一些未经证实的信息',
                '与已知事实存在部分冲突',
                '信息来源不够明确'
              ],
              suggestion: '建议在传播前通过权威渠道核实信息真实性，避免传播不准确信息。'
            },
            {
              score: 20,
              riskLevel: 'high',
              description: '该内容可能包含虚假信息，建议立即停止传播。',
              details: [
                '内容与已知事实严重不符',
                '包含明显的虚假信息特征',
                '语言具有煽动性，可能误导公众'
              ],
              suggestion: '强烈建议不要传播此信息，并通过官方渠道了解真实情况。'
            }
          ]
          }
          
          // 随机选择一个结果
          const randomIndex = Math.floor(Math.random() * baseResults.length)
          resolve(baseResults[randomIndex])
        }, 2000)
      })
    },
    
    getRiskIcon(level) {
      const icons = {
        low: '✅',
        medium: '⚠️',
        high: '❌'
      }
      return icons[level] || '❓'
    },
    
    getRiskText(level) {
      const texts = {
        low: '低风险',
        medium: '中等风险',
        high: '高风险'
      }
      return texts[level] || '未知风险'
    },
    
    getDetectionTypeIcon() {
      const hasText = this.textInput.trim().length > 0
      const hasImage = this.selectedImage !== null
      
      if (hasText && hasImage) {
        return '🤖'
      } else if (hasImage) {
        return '🖼️'
      } else {
        return '📝'
      }
    },
    
    getDetectionTypeText() {
      const hasText = this.textInput.trim().length > 0
      const hasImage = this.selectedImage !== null
      
      if (hasText && hasImage) {
        return '多模态检测'
      } else if (hasImage) {
        return '图片检测'
      } else {
        return '文本检测'
      }
    },
    
    formatDate(date) {
      return date.toLocaleDateString('zh-CN', {
        year: 'numeric',
        month: 'long',
        day: 'numeric'
      })
    },
    
    shareRumor(rumor) {
      if (navigator.share) {
        navigator.share({
          title: `辟谣：${rumor.title}`,
          text: rumor.truth,
          url: window.location.href
        })
      } else {
        // 复制到剪贴板
        navigator.clipboard.writeText(`辟谣：${rumor.title}\n${rumor.truth}`)
        alert('内容已复制到剪贴板')
      }
    }
  }
}
</script>

<style scoped>
.rumor-query-page {
  min-height: 100vh;
  background: #f8f9fa;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* 页面头部 */
.page-header {
  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
  color: white;
  padding: 60px 0;
  text-align: center;
}

.page-title {
  font-size: 42px;
  font-weight: bold;
  margin-bottom: 15px;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.page-subtitle {
  font-size: 18px;
  opacity: 0.9;
  margin: 0;
}

/* 检测功能区域 */
.detection-section {
  padding: 60px 0;
}

.detection-content {
  background: white;
  border-radius: 20px;
  box-shadow: 0 5px 20px rgba(0,0,0,0.1);
  overflow: hidden;
}

.detection-panel {
  padding: 40px;
}

.panel-header {
  text-align: center;
  margin-bottom: 30px;
}

.panel-title {
  font-size: 24px;
  font-weight: bold;
  color: #1e3c72;
  margin-bottom: 10px;
}

.panel-desc {
  font-size: 16px;
  color: #666;
  margin: 0;
}

/* 输入标签样式 */
.input-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: 500;
  color: #333;
}

.label-text {
  display: flex;
  align-items: center;
  gap: 5px;
}

.label-optional {
  font-size: 14px;
  color: #666;
  font-weight: normal;
}

/* 文本输入区域 */
.input-section {
  margin-bottom: 30px;
}

.text-input {
  width: 100%;
  height: 200px;
  padding: 20px;
  border: 2px solid #e1e5e9;
  border-radius: 15px;
  font-size: 16px;
  resize: vertical;
  transition: border-color 0.3s ease;
  margin-bottom: 20px;
}

.text-input:focus {
  outline: none;
  border-color: #1e3c72;
}

.text-input.error {
  border-color: #dc3545;
}



/* 图片上传区域 */
.upload-section {
  margin-bottom: 30px;
}

.upload-area {
  border: 2px dashed #e1e5e9;
  border-radius: 15px;
  padding: 40px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-bottom: 20px;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.upload-area:hover {
  border-color: #1e3c72;
  background: #f8f9fa;
}

.upload-area.has-file {
  border-style: solid;
  border-color: #1e3c72;
  background: #f8f9fa;
}

.upload-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.upload-icon {
  font-size: 48px;
  margin-bottom: 10px;
}

.upload-text {
  font-size: 18px;
  font-weight: 500;
  color: #333;
  margin: 0;
}

.upload-hint {
  font-size: 14px;
  color: #666;
  margin: 0;
}

.upload-preview {
  display: flex;
  align-items: center;
  gap: 20px;
  position: relative;
}

.preview-image {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 10px;
}

.preview-info {
  flex: 1;
  text-align: left;
}

.file-name {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  margin: 0 0 5px 0;
}

.file-size {
  font-size: 14px;
  color: #666;
  margin: 0;
}

.remove-btn {
  position: absolute;
  top: -10px;
  right: -10px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #dc3545;
  color: white;
  border: none;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
}

.upload-actions {
  display: flex;
  justify-content: flex-end;
  gap: 15px;
}

/* 检测模式提示 */
.detection-mode-hint {
  background: #f8f9fa;
  border: 1px solid #e1e5e9;
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 30px;
}

.hint-item {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.hint-item:last-child {
  margin-bottom: 0;
}

.hint-icon {
  font-size: 16px;
  min-width: 20px;
}

.hint-text {
  font-size: 14px;
  color: #666;
}

/* 操作按钮区域 */
.detection-actions {
  display: flex;
  justify-content: flex-end;
  gap: 15px;
  margin-top: 30px;
}

/* 按钮样式 */
.btn {
  padding: 12px 24px;
  border-radius: 25px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  border: none;
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-primary {
  background: #1e3c72;
  color: white;
}

.btn-primary:hover:not(:disabled) {
  background: #2a5298;
  transform: translateY(-2px);
}

.btn-secondary {
  background: #6c757d;
  color: white;
}

.btn-secondary:hover {
  background: #5a6268;
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.loading-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top-color: white;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* 检测结果 */
.result-section {
  margin-top: 40px;
}

.result-card {
  background: white;
  border-radius: 20px;
  box-shadow: 0 5px 20px rgba(0,0,0,0.1);
  padding: 30px;
}

.result-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 1px solid #e1e5e9;
}

.result-title-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.result-title {
  font-size: 24px;
  font-weight: bold;
  color: #1e3c72;
  margin: 0;
}

.detection-type-badge {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  background: #e3f2fd;
  border: 1px solid #bbdefb;
  border-radius: 20px;
  font-size: 12px;
  width: fit-content;
}

.badge-icon {
  font-size: 14px;
}

.badge-text {
  color: #1976d2;
  font-weight: 500;
}

.result-score {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.score-label {
  font-size: 14px;
  color: #666;
}

.score-value {
  font-size: 32px;
  font-weight: bold;
}

.result-score.low .score-value {
  color: #28a745;
}

.result-score.medium .score-value {
  color: #ffc107;
}

.result-score.high .score-value {
  color: #dc3545;
}

.result-content {
  display: grid;
  gap: 30px;
}

.risk-indicator {
  text-align: center;
  padding: 20px;
  border-radius: 15px;
  background: #f8f9fa;
}

.risk-level {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 15px;
}

.risk-icon {
  font-size: 24px;
}

.risk-text {
  font-size: 20px;
  font-weight: bold;
}

.risk-level.low .risk-text {
  color: #28a745;
}

.risk-level.medium .risk-text {
  color: #ffc107;
}

.risk-level.high .risk-text {
  color: #dc3545;
}

.risk-description {
  font-size: 16px;
  color: #666;
  line-height: 1.6;
}

.detection-details h4,
.suggestions h4 {
  font-size: 18px;
  font-weight: bold;
  color: #1e3c72;
  margin-bottom: 15px;
}

.details-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.details-list li {
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
  color: #666;
}

.details-list li:last-child {
  border-bottom: none;
}

.suggestions p {
  font-size: 16px;
  color: #666;
  line-height: 1.6;
  margin: 0;
}

/* 热门谣言区域 */
.popular-rumors-section {
  padding: 60px 0;
  background: white;
}

.section-title {
  font-size: 36px;
  font-weight: bold;
  text-align: center;
  color: #1e3c72;
  margin-bottom: 50px;
}

.rumors-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 30px;
}

.rumor-card {
  background: #f8f9fa;
  border-radius: 20px;
  padding: 25px;
  transition: transform 0.3s ease;
}

.rumor-card:hover {
  transform: translateY(-5px);
}

.rumor-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.rumor-category {
  background: #1e3c72;
  color: white;
  padding: 4px 12px;
  border-radius: 15px;
  font-size: 12px;
}

.rumor-date {
  font-size: 12px;
  color: #666;
}

.rumor-title {
  font-size: 18px;
  font-weight: bold;
  color: #1e3c72;
  margin-bottom: 10px;
}

.rumor-content {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
  margin-bottom: 15px;
}

.rumor-truth {
  background: #e8f5e8;
  padding: 15px;
  border-radius: 10px;
  margin-bottom: 15px;
}

.rumor-truth h4 {
  font-size: 14px;
  font-weight: bold;
  color: #28a745;
  margin-bottom: 8px;
}

.rumor-truth p {
  font-size: 14px;
  color: #333;
  line-height: 1.6;
  margin: 0;
}

.rumor-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.rumor-source {
  font-size: 12px;
  color: #666;
}

.share-btn {
  background: #1e3c72;
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 15px;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.3s ease;
}

.share-btn:hover {
  background: #2a5298;
}

/* 统计区域 */
.statistics-section {
  padding: 60px 0;
  background: #1e3c72;
  color: white;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
}

.stat-card {
  text-align: center;
  padding: 30px;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
}

.stat-icon {
  font-size: 48px;
  margin-bottom: 15px;
}

.stat-value {
  font-size: 36px;
  font-weight: bold;
  margin-bottom: 10px;
  color: #ffd700;
}

.stat-label {
  font-size: 16px;
  opacity: 0.9;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .page-title {
    font-size: 32px;
  }
  
  .page-subtitle {
    font-size: 16px;
  }
  
  .detection-panel {
    padding: 20px;
  }
  
  .text-input {
    height: 150px;
  }
  
  .upload-area {
    padding: 20px;
  }
  
  .upload-preview {
    flex-direction: column;
    text-align: center;
  }
  
  .detection-actions {
    flex-direction: column;
    gap: 10px;
  }
  
  .detection-actions .btn {
    width: 100%;
    justify-content: center;
  }
  
  .result-header {
    flex-direction: column;
    gap: 20px;
  }
  
  .result-title-section {
    align-items: center;
  }
  
  .upload-actions {
    flex-direction: column;
  }
  
  .rumors-grid {
    grid-template-columns: 1fr;
  }
  
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
</style> 